<template lang="pug">
g-v(a-i="center")
  g-v.content(a-i="center")
    div.title 用户登录
    input.input(
        placeholder="用户名"
        v-model="username"
        :class="{required: required.username}"
        @input="requirementCheck('username', $event)"
        )
    input.input(
        placeholder="密码"
        type="password"
        v-model="password"
        :class="{required: required.password}"
        @input="requirementCheck('password', $event)"
        )
    //- label.remember
      input.remember-check(type="checkbox" v-model="toRemember")
      | 记住密码
    g-h(j-c="center" a-i="center")
      Loading.loading(:isLoading="isLoading")
      mt-button.login-button(
          type="primary"
          @click="login(false)"
          ) 登录
    //- div(@click="test") 测试登录
    //- div(@click="clickabc" :style="{marginTop: '1rem'}") {{ abc }}启用监听扫描插件
    div(v-if="appConfig.name === 'dev'") {{ appConfig.baseURL }}
</template>

<script>
import api from "$api"
import util from "$util"

export default {
  data() {
    return {
      loading: {
        login: false,
      },
      required: {
        username: false,
        password: false,
      },
      toRemember: false,
      username: "",
      password: "",
      isLoading: false,
      abc: "未",

      appConfig: api.AppConfig,
    }
  },
  methods: {
    requirementCheck(key, e) {
      let v = e ? e.target.value : this[key]
      if (v === "") {
        this.required[key] = true
        return false
      } else {
        this.required[key] = false
        return true
      }
    },

    test() {
      this.login(true)
    },

    async login(isTest) {
      if (this.loading.login) {
        return
      }

      // check input
      if (!isTest) {
        let checkList = ["username", "password"]
        for (let k of checkList) {
          if (!this.requirementCheck(k)) {
            return
          }
        }
      }

      this.isLoading = true
      this.loading.login = true
      try {
        let param = {
          username: this.username,
          password: this.password,
        }
        if (isTest) {
          param = {
            username: "admin",
            password: "Pass123456",
          }
        }

        let data = await api.Login(param)
        api.setLoginToken(data.token)

        let permData = await api.GetPermission()

        let user = this.$root.User
        if (permData.Comments) {
          for (let perm of permData.Comments) {
            user.permMap[perm] = true
          }
        }

        user.IsLoggedIn = true
        user.id = data.UserId
        user.realName = data.UserLoginName
        user.token = data.token

        let loginInfo = {
          userid: user.id,
          createTime: Date.now(),
          maxAge: 0,
          token: user.token,
        }
        if (this.toRemember) {
          loginInfo.maxAge = 1000000000000
        }
        util.loginInfo.setUser(loginInfo)
      } catch(err) {
        this.$root.error(err)
      } finally {
        this.isLoading = false
        this.loading.login = false
      }
    },

    clickabc() {
      this.abc = "已"
      util.registerScanner((data) => {
        util.Toast(data)
      })
    },
  },

  mounted() {
    api.hasNewVersion()
      .then((v) => {
        if (!v.hasNewVersion) {
          return
        }

        if (v.forceUpdate) {
          util.Alert("发现新版本").then(() => {
            api.downloadApk(v.downUrl)
          })
        } else {
          util.Confirm("发现新版本, 要更新吗").then(() => {
            api.downloadApk(v.downUrl)
          }).catch((err) => {
          })
        }
      })
      .catch((err) => {
        // console.log(err)
      })
  },
}
</script>

<style lang="stylus" scoped>

.content
  width: 80%
  max-width: 30rem

.title
  text-align: center
  margin: 3rem 0 0.5rem
  font-size: 26px

.input
  margin: 0.3rem 0
  padding: 0.7em
  width: 100%
  border: 1px solid grey200
  &:focus
    outline: none
  
.required
  border-color: red500

.remember
  align-self: flex-start
  &-check
    margin: 0.5rem 0.3rem 0.5rem

.login-button
  margin: 1rem 0
  width: 7rem

.loading
  z-index: 1
  position: absolute
  top: 0
  left: 0
  right: 0

</style>
